// ignore_for_file: must_be_immutable

/*
 * @Author: CodeHare
 * @Date: 2023-10-09 09:39:35
 * @LastEditors: CodeHare
 * @LastEditTime: 2023-10-20 16:05:41
 * @Description: 能量柱状图表
 */
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:get/get.dart';
import 'package:yt_devops/resources/str_res_keys.dart';

import '../../../../components/log_utils.dart';

class EnergyBarLineChart extends StatefulWidget {
  /// 储能充电
  List<List>? chargeData;

  /// 储能充电
  List<List>? dischargeData;

  /// 光伏发电量
  List<List>? pvGeneration;
  List<dynamic>? data;
  EnergyBarLineChart({
    super.key,
    this.chargeData,
    this.dischargeData,
    this.pvGeneration,
    this.data
  });

  @override
  State<EnergyBarLineChart> createState() => _EnergyBarLineChartState();
}

class _EnergyBarLineChartState extends State<EnergyBarLineChart> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    Log.d('pvGeneration==' + widget.data.toString());
    return Echarts(
      captureHorizontalGestures: true,
      option: '''
      {
        backgroundColor: '#ffffff',

        /// 提示框
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.85)',
          axisPointer: {
            position: function (pt) {
              return [pt[0], 500];
            }
          },
          borderWidth: 0,
          opacity: 0.01,
          confine: true,
          padding: [
            10, // 上
            8, // 右
            10, // 下
            8 // 左
          ],
          textStyle: {
            color: 'white'
          }
        },

        /// 横轴
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              type: [10, 5],
              dashOffset: 5,
              color: 'rgba(0,0,0,0.09)',
              width: 1
            }
          },
          axisLabel: {
            color: '#999999',
            fontSize: 11,
            align: 'center',
            verticalAlign: 'top',
            // formatter: function (value, index) {
            //   if(value.length == 5) {
            //     return value.substring(3, 5);
            //   } else if(value.length == 7) {
            //     return value.substring(5, 7);
            //   }
            //   return value;
            // },
          },
          axisTick: {
            show: false
          }
        },

        /// 纵轴
        yAxis: {
          type: 'value',
           alignTicks: true,
      name: 'kW',
      nameTextStyle: {
        align: "center"
      },
      offset: 0,
          /// 坐标轴在 grid 区域中的横向分隔线
          splitLine: {
            show: true,
            lineStyle: {
              type: [10, 5],
              dashOffset: 5,
              color: 'rgba(0,0,0,0.09)',
              width: 1
            }
          },
    axisLabel: {
      color: '#999999',
      fontSize: 11,
      interval: function (index) { // 自定义间隔函数 
          if (index % 120 === 0) { // 每四小时显示一次  // 返回值是五分钟为一个间隔
              return true;
          } else {
              return false;
          }
      },
    },
        },
  /// 坐标轴
  grid: {
    top: 30,
    bottom: 50,
    containLabel: true,
    right: 16,
    left: 30,
  },
  legend: {
    show: true,
    icon: 'rect',
    itemHeight: 3,
    itemWidth: 12,
    bottom:0,
    left:10,
    right: 10,
  },
  
        /// 图表数据
        series: ${jsonEncode(widget.data)},

      }
      ''',
    );
  }
}
